'use client';

import type {
  IConfigEmail,
  IConfigEmailAliyunItem,
  IConfigEmailTencentItem,
} from '@/interfaces';
import classNames from 'classnames';

export default function QueryConfigEmail({
  details,
}: {
  details: IConfigEmail;
}) {
  const login = details.list.LOGIN;
  const register = details.list.REGISTER;

  return (
    <div className="row">
      <div className="col">
        <div className="vstack gap-4">
          <div
            className={classNames('text-center', {
              'text-primary': login?.service === 'TENCENT',
            })}
          >
            登录 - 腾讯云
          </div>
          <div className="row">
            <div className="col">
              <EmailItem type="TENCENT" item={login?.tencent} />
            </div>
          </div>

          <div
            className={classNames('text-center', {
              'text-primary': login?.service === 'ALIYUN',
            })}
          >
            登录 - 阿里云
          </div>
          <div className="row">
            <div className="col">
              <EmailItem type="ALIYUN" item={login?.aliyun} />
            </div>
          </div>

          <div
            className={classNames('text-center', {
              'text-primary': register?.service === 'TENCENT',
            })}
          >
            注册 - 腾讯云
          </div>
          <div className="row">
            <div className="col">
              <EmailItem type="TENCENT" item={register?.tencent} />
            </div>
          </div>

          <div
            className={classNames('text-center', {
              'text-primary': register?.service === 'ALIYUN',
            })}
          >
            注册 - 阿里云
          </div>
          <div className="row">
            <div className="col">
              <EmailItem type="ALIYUN" item={register?.aliyun} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

const EmailItem = ({
  type,
  item,
}: {
  type: 'TENCENT' | 'ALIYUN';
  item?: IConfigEmailAliyunItem | IConfigEmailTencentItem;
}) => {
  if (item) {
    return (
      <>
        <dl className="row row-cols-4">
          <dt
            className={classNames('col my-2 text-end fw-normal', {
              'text-success': item.enable,
              'text-secondary': !item.enable,
            })}
          >
            是否启用
          </dt>
          <dd className="col my-2 text-start">{item.enable + ''}</dd>

          <dt className="col my-2 text-end fw-normal">有效期</dt>
          <dd className="col my-2 text-start">{item.expire}</dd>

          <dt className="col my-2 text-end fw-normal">有效次数</dt>
          <dd className="col my-2 text-start">{item.total}</dd>

          <dt className="col my-2 text-end fw-normal">间隔时间</dt>
          <dd className="col my-2 text-start">{item.interval}</dd>

          <dt className="col my-2 text-end fw-normal">次数恢复时间</dt>
          <dd className="col my-2 text-start">{item.recoveryTime}</dd>

          <dt className="col my-2 text-end fw-normal">长度</dt>
          <dd className="col my-2 text-start">{item.length}</dd>

          <dt className="col my-2 text-end fw-normal">字母数字</dt>
          <dd className="col my-2 text-start">{item.alphanumeric + ''}</dd>

          <dt className="col my-2 text-end fw-normal">字母</dt>
          <dd className="col my-2 text-start">{item.alphabetic + ''}</dd>

          <dt className="col my-2 text-end fw-normal">Ascii</dt>
          <dd className="col my-2 text-start">{item.ascii + ''}</dd>

          <dt className="col my-2 text-end fw-normal">数字</dt>
          <dd className="col my-2 text-start">{item.numeric + ''}</dd>
        </dl>
        {type === 'TENCENT' && (
          <dl className="row row-cols-4">
            <dt className="col my-2 text-end fw-normal">SecretId</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailTencentItem).secretId}
            </dd>

            <dt className="col my-2 text-end fw-normal">SecretKey</dt>
            <dd className="col my-2 text-start">*********</dd>

            <dt className="col my-2 text-end fw-normal">Action</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailTencentItem).action}
            </dd>

            <dt className="col my-2 text-end fw-normal">Version</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailTencentItem).version}
            </dd>

            <dt className="col my-2 text-end fw-normal">Endpoint</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailTencentItem).endpoint}
            </dd>

            <dt className="col my-2 text-end fw-normal">服务地域</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailTencentItem).region}
            </dd>

            <dt className="col my-2 text-end fw-normal">发信邮件地址</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailTencentItem).fromEmailAddress}
            </dd>

            <dt className="col my-2 text-end fw-normal">收信人邮箱地址</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailTencentItem).destination.join(', ')}
            </dd>

            <dt className="col my-2 text-end fw-normal">邮件主题</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailTencentItem).subject}
            </dd>

            <dt className="col my-2 text-end fw-normal">
              邮件的 &quot;回复&ldquo; 电子邮件地址
            </dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailTencentItem).replyToAddresses}
            </dd>

            <dt className="col my-2 text-end fw-normal">模板 Id</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailTencentItem).template.templateId}
            </dd>

            <dt className="col my-2 text-end fw-normal">模板变量参数</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailTencentItem).template.templateData}
            </dd>

            <dt className="col my-2 text-end fw-normal">简单邮件内容</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailTencentItem).simple}
            </dd>

            <dt className="col my-2 text-end fw-normal">附件相关参数</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailTencentItem).attachments}
            </dd>

            <dt className="col my-2 text-end fw-normal">退订选项</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailTencentItem).unsubscribe}
            </dd>

            <dt className="col my-2 text-end fw-normal">邮件触发类型</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailTencentItem).triggerType}
            </dd>
          </dl>
        )}
        {type === 'ALIYUN' && (
          <dl className="row row-cols-4">
            <dt className="col my-2 text-end fw-normal">AccessKeyId</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailAliyunItem).accessKeyId}
            </dd>

            <dt className="col my-2 text-end fw-normal">AccessKeySecret</dt>
            <dd className="col my-2 text-start">*********</dd>

            <dt className="col my-2 text-end fw-normal">服务地域</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailAliyunItem).endpoint}
            </dd>

            <dt className="col my-2 text-end fw-normal">发信地址</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailAliyunItem).accountName}
            </dd>

            <dt className="col my-2 text-end fw-normal">地址类型</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailAliyunItem).addressType}
            </dd>

            <dt className="col my-2 text-end fw-normal">回信地址</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailAliyunItem).replyToAddress}
            </dd>

            <dt className="col my-2 text-end fw-normal">邮件主题</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailAliyunItem).subject}
            </dd>

            <dt className="col my-2 text-end fw-normal">目标地址</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailAliyunItem).toAddress}
            </dd>

            <dt className="col my-2 text-end fw-normal">Action</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailAliyunItem).action}
            </dd>

            <dt className="col my-2 text-end fw-normal">邮件跟踪</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailAliyunItem).clickTrace}
            </dd>

            <dt className="col my-2 text-end fw-normal">发信人昵称</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailAliyunItem).fromAlias}
            </dd>

            <dt className="col my-2 text-end fw-normal">邮件 html 正文</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailAliyunItem).htmlBody}
            </dd>

            <dt className="col my-2 text-end fw-normal">标签</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailAliyunItem).tagName}
            </dd>

            <dt className="col my-2 text-end fw-normal">邮件 text 正文</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailAliyunItem).textBody}
            </dd>

            <dt className="col my-2 text-end fw-normal">回信地址</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailAliyunItem).replyAddress}
            </dd>

            <dt className="col my-2 text-end fw-normal">回信地址别称</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigEmailAliyunItem).replyAddressAlias}
            </dd>
          </dl>
        )}
      </>
    );
  }

  return <div className="text-center my-4 text-muted">暂无配置</div>;
};
